<template>
	<view id="integralDell">
		<Header txt="物品详情" v-if="baidu"></Header>
		<HeaderB txt="物品详情" v-if="!baidu"></HeaderB>
		<view class="gift gift2" v-if="!isOk">
			<uni-popup ref="popup2" type="top" background-color="#FFFFFF" class="dislog">
				<view class="contxt">
					<view class="tit">
						编辑地址
					</view>
					<view class="item">
						<text>收货人</text>
						<input class="retxt" type="text" v-model="form.name" value="" placeholder="请输入姓名"/>
					</view>
					<view class="item">
						<text>电话</text>
						<input class="retxt" type="text" v-model="form.mobile" value="" placeholder="请输入电话"/>
					</view>
					<view class="item">
						<uni-data-picker v-model="form.provinces" :localdata="items" popup-title="请选择城市" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
						<text>地址</text>
						<input class="retxt" type="text" v-model="form.provinces" value="" placeholder="请输入城市"/>
					</view><view class="item">
						<text>门牌号</text>
						<input class="retxt" type="text" v-model="form.desc" value="" placeholder="详细地址：如道路、门牌号、小区、单元室等"/>
					</view>
					<view class="item">
						<view class="items">是否设置为默认地址</view>
						<switch :checked="checked" @change="switch1Change" />
					</view>
					<view class="btn">
						<button type="primary" @click="submitForm">确定</button>
					</view>
				</view>
			</uni-popup>
			<view class="top-tit" @click="add">
				<view class="tit-btn">
					添加地址
				</view>
			</view>
			<radio-group @change="radioChange">
			    <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in addressListD" :key="item.id">
			        <view class="radio">
			            <radio :value="String(item.id)" :checked="item.id == current" />
			        </view>
			        <text class="address" v-if="item.city">
			        	{{ item.name }} {{ item.mobile }} {{ item.province }}{{ item.city}}{{ item.region }}{{ item.address }}
			        </text>
					<text class="address" v-if="!item.city">
						{{ item.name }} {{ item.mobile }} {{ item.province }}{{ item.region }}{{ item.address }}
					</text>
					<text class="editor_btn" @click="deleteFunction(item)">删除</text>
					<text class="editor_btn" @click="editorFunction(item)">编辑</text>
					<br>
			    </label>
			</radio-group>      
			<view class="dell">
				<view class="shop_goods clearfix">
				  <view
				    class="good_img"
				    :style="{ background: 'url( ' + couponsForm.goodsImg + ')' }"
				  >
				  </view>
				  <view class="good_title">
				    <view class="good_title01">{{ couponsForm.goodsName }}</view>
				    <view class="good_title01">{{ couponsForm.remark}}</view>
				    <view class="good_title02" v-if="isgoodsType==true">
				      <span style="color: #ff6f15">{{ couponsForm.point }}</span
				      >积分
				    </view>
				  </view>
				</view> 
			</view>
			<view class="clearfix footer" v-if="isgoodsType==true">
			    <view class="footer_left">
			        支付：<text class="footer_left_num">{{ couponsForm.point }}</text>积分
			    </view>
			    <view class="footer_right"  v-if="(points > point || points == point)&&isGift==true" @click="openConfrim2">
			        立即兑换
			    </view>
			    <view class="footer_right02" v-if="points < point" @click="openConfrim2">积分不足</view>
			</view>
			<view class="clearfix footer" v-if="isgoodsType==false">
			    <view class="footer_center"   @click="openConfrim2(4)">
			        立即兑换
			    </view>
			</view>
		</view>
		<view class=" gift2" v-if="isOk">
			<view class="coupons_list_bg"  v-if="ifSHow==false&&isGift==false">
			    <view class="coupons_num">
			      <text class="coupons_num01">{{ couponsForm.money }}</text
			      ><text class="coupons_num02">元</text>
			    </view>
			    <view class="coupons_num03">优惠卷</view>    
			</view>
			<view class="coupons_list_bg coupons_list_bg02"  v-if="ifSHow==true&&isGift==false">
			    <view class="coupons_num">
			      <text class="coupons_num01">{{ couponsForm.money }}</text
			      ><text class="coupons_num02">元</text>
			    </view>
			    <view class="coupons_num03">优惠卷</view>    
			</view>
			<view class="coupons_list_bg coupons_list_bg02 coupons_list_bg03"  v-if="isGift==true">
			    <image :src="couponsForm.goodsImg" mode="aspectFit"></image>
			</view>
			<view class="coupons_list_con">
			    <view class="coupons_list_tit">{{ couponsForm.goodsName }}</view>
			    <view class="coupons_list_text">
			      <text class="coupons_list_num">{{ couponsForm.point }}</text
			      >积分
			    </view>    
			</view>
			<view class="coupons_list_detile">
				<view class="coupons_detile" v-if="isGift==true">
				  <view class="coupons_list_tit">商品详情</view>
				  <view class="coupons_list_text">{{couponsForm.goodsDescribe}}</view>
				</view>
				<view class="coupons_detile">
					<view class="coupons_list_tit">商品有效期</view>
					<view class="coupons_list_text" v-if="ifSHow==false&&isGift==false">兑换后七天内有效，请在有效期内使用</view>
					<view class="coupons_list_text" v-if="ifSHow==true&&isGift==false">兑换后永久有效</view>
					<view class="coupons_list_text" v-if="isGift==true">兑换后通过邮寄的方式发送给您,商品归个人所属，永久有效</view>
				</view>
			  <view class="coupons_detile" v-if="ifSHow==false&&isGift==false">
			    <view class="coupons_list_tit">使用方法</view>
			    <view class="coupons_list_text">前往个人中心—优惠卷，进行使用</view>
			  </view>
			  <view class="coupons_detile">
			    <view class="coupons_list_tit">注意事项</view>
			    <view class="coupons_list_text">
			      除系统异常外，兑换申请一但提交无法取消，积分概不归还
			    </view>
			  </view>
			</view>
			<view class="clearfix footer"  >
			    <view class="footer_left" >
			        支付：<text class="footer_left_num">{{ couponsForm.point }}</text>积分
			    </view>
			    <view class="footer_right"  v-if="(points > point || points == point)&&isGift==false" @click="openConfrim">
			        立即兑换
			    </view>
				<view class="footer_right"  v-if="(points > point || points == point)&&isGift==true" @click="openAddress">
				    立即兑换
				</view>
			    <view class="footer_right02" v-if="points < point">积分不足</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {District} from '../../common/city.js';
	export default {
		data() {
			return {
				items:District,
				couponsForm:'',
				points: 0,
				point:'',
				goodsId:'',
				addressId:'',
				ifSHow:false,
				isGift:false,
				isOk:true,
				form: {
				        name: "",
				        mobile: "",
				        provinces: "",
				        citys: "",
				        area: "",
				        desc: "",
				        province: "",
				      },
				addressListD:[],
				current: '0',
				checked:true,
				addId:'',
				isgoodsType:false,
				baidu:true,
			};
		},
		onLoad(option){
			const item = JSON.parse(decodeURIComponent(option.item));
			this.ifSHow=item.ifSHow
			if(item.goodsImg.length>1){
				this.isGift = true
			}
			if(item.goodsType==4){
				this.isOk=false
				this.isgoodsType=false
			}else{
				this.isgoodsType=true
				this.isOk=true
				this.goodsId=item.id
			}
			this.couponsForm = item
			this.point=item.point
			console.log(item);
		  },
		onShow(){
			 this.getUserPoints()
			 this.addressList()
			 // #ifdef MP-BAIDU
			 this.baidu=false
			 // #endif
		},
		methods: {
			onchange(e) {
			    const value = e.detail.value
				let str
				console.log(value);
				if(value.length==2){
					this.form.provinces = value[0].text + " " +value[1].text
					this.form.province = value[0].value;
					this.form.citys = value[0].value + 100;
					this.form.area = value[1].text;
				}else if(value.length==3){
					this.form.provinces = value[0].text + " " +value[1].text + " " + value[2].text
					this.form.province = value[0].value;
					this.form.citys = value[1].value;
					this.form.area = value[2].text;
				}	
			},
			onnodeclick(node) {},
			switch1Change(e) {
				this.checked=e.target.value
			},
			editorFunction(row){
				this.$refs.popup2.open('top')
				this.form.name = row.name;
				this.form.mobile = row.mobile;
				let province = row.province;
				let cityId = row.city;
				let area = row.region;
				if(row.city){
					this.form.provinces = province + " "+ row.city  + " " + area;
				}else{
					this.form.provinces = province + " " + " " + area;
				}
				this.form.desc = row.address;
				this.addId = row.id;
				this.form.province = row.provinceId;
				this.form.citys = row.cityId;
				this.form.area = row.region;      
			},
			deleteFunction(row){
				let that = this;
				this.addId = row.id;
				let obj={
					id: this.addId,
					isDel: 1,
				}
				uni.showModal({
				    title: '确认删除',
				    content: '请确认是否删除收货地址',
				    success: function (res) {
				        if (res.confirm) {
							that.$store
								.dispatch("UserAddressUpadte",obj)
								.then((response) => {
									let data = response.data;
									if (data.code == "0") {
										console.log(data);
										uni.showToast({
											title:"删除成功"
										})
										that.addressList();
									}else{
										uni.showModal({
										    title: '',
										    content: data.msg,
										    success: function (res) {
										        if (res.confirm) {
										        } else if (res.cancel) {
										        }
										    }
										});
									}        
								})
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			radioChange(evt) {
				let index=0
			    for (let i = 0; i < this.addressListD.length; i++) {
			        if (this.addressListD[i].id === String(evt.detail.value)) {
			            this.current =String(this.addressListD[i].id)
			            break;
			        }
			    }
				// console.log(evt.detail.value);
				this.addressId = Number(evt.detail.value)
			},
			addressList(){
				let that=this
				that.$store
					.dispatch("UserAddress")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
							that.addressListD=data.obj
							that.addressListD.forEach((item)=>{
								if(item.isDef==1){
									 that.current =String(item.id)
									 that.addressId =item.id
								}
							})
							if(that.addressListD.length==0){
								that.addressId=''
								console.log(that.addressId);
							}
							// console.log(that.addressListD);
						}        
					})
			},
			submitForm(){
      			let that = this;
      			if (
      			  !/^1\d{10}$/.test(this.form.mobile) ||
      			  this.form.name == "" ||
      			  this.form.provinces == "" ||
      			  this.form.desc == ""
      			) {
					uni.showModal({
					    title: '',
					    content: '存在未填写或未符合要求的选项',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
      			  return false;
      			}
      			let isDef;
      			if (this.checked == true) {
      			  isDef = 1;
      			}
      			if (this.checked == false) {
      			  isDef = 0;
      			}
				if (this.addId == "") {
					let params={
						isDef: isDef,
						name: encodeURI(this.form.name),
						mobile: this.form.mobile,
						provinceId: this.form.province,
						cityId: this.form.citys,
						region: encodeURI(this.form.area),
						address: this.form.desc,
					}
					that.$store
						.dispatch("UserAddressSave",params)
						.then((response) => {
							let data = response.data;
							if (data.code == "0") {
								uni.showToast({
									title:"保存成功"
								})
								this.$refs.popup2.close('top')
								that.addressList()
							}else{
								uni.showModal({
								    title: '',
								    content: data.msg,
								    success: function (res) {
								        if (res.confirm) {
								        } else if (res.cancel) {
								        }
								    }
								});
							}        
						})
				}else{
					let vad={
						id: this.addId,
						isDef: isDef,
						name:  encodeURI(this.form.name),
						mobile: this.form.mobile,
						provinceId: this.form.province,
						cityId: this.form.citys,
						region: encodeURI(this.form.area),
						address: this.form.desc,
					}
					that.$store
						.dispatch("UserAddressUpadte",vad)
						.then((response) => {
							let data = response.data;
							if (data.code == "0") {
								uni.showToast({
									title:"编辑成功"
								})
								this.$refs.popup2.close('top')
								that.addressList();
							}else{
								uni.showModal({
								    title: '',
								    content: data.msg,
								    success: function (res) {
								        if (res.confirm) {
								        } else if (res.cancel) {
								        }
								    }
								});
							}        
						})
				}
			},
			add(){
				this.form={
				        name: "",
				        mobile: "",
				        provinces: "",
				        citys: "",
				        area: "",
				        desc: "",
				        province: "",
				      },
				this.$refs.popup2.open('top')
			},
			openAddress(){
				this.isOk=false
				for (let i = 0; i < this.addressListD.length; i++) {
				    if (this.addressListD[i].isDef === 1) {
				        this.current =String(this.addressListD[i].id)
						this.addressId =this.addressListD[i].id
				    }
				}
			},
			openConfrim2(row){
				let that=this
				this.goodsId = this.couponsForm.id;
				if (this.addressId == "") {
					uni.showModal({
					    title: '',
					    content: '请输入收货人信息',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				  return;
				}
				uni.showModal({
				    title: '确认兑换',
				    content: '请确认是否兑换礼品',
				    success: function (res) {
				        if (res.confirm) {
							if(row==4){
								that.sure_demand(4);
							}else{
								that.sure_demand(2);
							}
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			openConfrim() {
				let that=this
			      this.goodsId = this.couponsForm.id;
				  uni.showModal({
				      title: '确认兑换',
				      content: '请确认是否兑换优惠券',
				      success: function (res) {
				          if (res.confirm) {
				               that.sure_demand(1);
				          } else if (res.cancel) {
				              console.log('用户点击取消');
				          }
				      }
				  });
			},
			sure_demand(num) {
			  let that = this;
			  let obj;
			  if (num == 1) {
			    obj = {
			      goodsId: this.goodsId,
			    };
			  }
			  if (num == 2) {
			    if (that.addressListD.length == 0) {
					uni.showModal({
					    title: '',
					    content: '请添加收货人信息',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
					return;
			    }
			    if (this.addressId == "") {
					uni.showModal({
					    title: '',
					    content: '请输入收货人信息',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
			      return;
			    }
			    obj = {
			      addressId: this.addressId,
			      goodsId: this.goodsId,
			    };
			  }
			  if(num==4){
				obj={
				        addressId: this.addressId,
						pointsUserGoodsId: this.goodsId,
				    }
				if (this.addressId == "") {
					uni.showModal({
					    title: '',
					    content: '请输入收货人信息',
					    success: function (res) {
					        if (res.confirm) {
					            console.log('用户点击确定');
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				  return;
				}
					that.$store
						.dispatch("SavePizeAddress",obj)
						.then((response) => {
							let data = response.data;
							if (data.code == "0") {
								uni.showToast({
									title:"兑换成功"
								})
								that.getUserPoints();
								setTimeout(function() {
									uni.navigateTo({
										url: "/pagesA/user/myGift"
									})
								}, 200);
								
							}        
						})
				  return;
			  }
			  that.$store
			  	.dispatch("ExchangeGoods",obj)
			  	.then((response) => {
			  		let data = response.data;
			  		if (data.code == "0") {
						uni.showToast({
							title:"兑换成功"
						})
			  			that.getUserPoints();
						setTimeout(function() {
							uni.navigateTo({
								url: "/pagesA/active/integral"
							})
						}, 200);
			  			
			  		}        
			  	})
			},   
			getUserPoints(){
				let that=this
				that.$store
					.dispatch("GetUserPoints")
					.then((response) => {
						let data = response.data;
						if (data.code == "0") {
							that.points=data.obj
						}        
					})
			},
		},
	}
</script>

<style lang="less">	
#integralDell{
	overflow: hidden;
	uni-label{
		display: inline-block;
		margin-bottom: 30rpx !important;
	}
	.gift{
		width: 90%;
		margin: 0 auto;
		
	}
	.dell{
		width: 90%;
		margin: 0 auto;
		image{
			width: 300rpx;
			height: 300rpx;
		}
	}
	.shop_goods {
	      margin-top: 30rpx;
	      background-color: #ffffff;
	      .good_img {
	        width: 250rpx;
	        height: 200rpx;
	        overflow: hidden;
	        float: left;
	        background-repeat: no-repeat !important;
	        background-color: #eaeaea !important;
	        background-position: center !important;
	        background-size: 70% !important;
	     }
	    .good_title {
	      float: left;
	      margin-left: 20rpx;
	      .good_title01 {
	        font-size: 28rpx;
	        color: #212121;
	        margin-top: 10rpx;
	      }
	      .good_title02 {
	        font-size: 20rpx;
	        color: #212121;
	        margin-top: 20rpx;
	      }
	    }  
	}
	.top-tit{
		overflow: hidden;
		margin-bottom: 10rpx;
		.tit-btn{
			float: right;
			width: 150rpx;
			text-align: center;
			height: 100%;
			background: #007AFF;
			color: #FFFFFF;
			padding: 6rpx 0;
			border-radius: 6rpx;
			// border: 2rpx solid #007AFF;
		}
	}
	.uni-radio-input {
		width: 28rpx !important;
		height: 28rpx !important;
	}
	.editor_btn{
		vertical-align: middle;
		color: #333333;
		float: right;
		font-size: 28rpx;
		margin-left: 20rpx;
		cursor: pointer;    
	}
	.radio{
		display: inline-block;
	}
	.uni-list-cell{
		// width: 90%;
		// margin: 0 auto;
	}
	.address{
		display: inline-block;
		width: 420rpx !important;
		height: 100rpx;
		vertical-align: middle;
		color: #656565;
		font-size: 28rpx;
	}
	.uni-popup__wrapper-box{
		height: 900rpx;
		background: #FFFFFF;
		overflow: hidden;
		.contxt{
			width: 100%;
			height: 900rpx !important;
			background-color: #FFFFFF;
			padding-bottom: 20rpx !important;
		}
		.tit{
			text-align: center;
		}
		.item{
			width: 90%;
			margin: 0 auto;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #C0C0C0;
		}
		.items{
			display: inline-block;
		}
		switch{
			margin-left: 200rpx;
		}
		text{
			display: inline-block;
			width: 100rpx;
			vertical-align: middle;
			color: #555;
			font-size: 28rpx;    
		}
		.retxt{	
			display: inline-block;
			vertical-align: middle;
			padding-left: 20rpx;
			width: 500rpx;
		}
		.btn{
			width: 80%;
			margin: 0 auto;
			margin-top: 100rpx;
			margin-bottom: 40rpx;
			background-color: #007AFF;
			border-radius: 200rpx !important;
			button{
				background: #007AFF;
				border-radius: 200rpx !important;
			}
		}
	}
	.footer {
	  position: absolute;
	  width: 100%;
	  bottom: 0;
	  left: 0;
	  .footer_left {
	    float: left;
	    width: 50%;
	    background-color: #ffffff;
	    height: 150rpx;
	    line-height: 150rpx;
	    text-align: center;
	    font-size: 35rpx;
	    color: #212121;
	    .footer_left_num {
	      color: #ff6b05;
	    }
	  }
	  .footer_right {
	    float: left;
	    width: 50%;
	    background-color: #3373fb;
	    height: 150rpx;
	    line-height: 150rpx;
	    text-align: center;
	    font-size: 35rpx;
	    color: #fff;
	  }
	  .footer_right02 {
	    float: left;
	    width: 50%;
	    background-color: #e3e5ea;
	    height: 150rpx;
	    line-height: 150rpx;
	    text-align: center;
	    font-size: 35rpx;
	    color: #a5a7aa;
	  }
	  .footer_center{
		   width: 50%;
		    height: 150rpx;
			background-color: #3373fb;
			line-height: 150rpx;
			text-align: center;
			font-size: 35rpx;
			color: #fff;
			margin: 0 auto 60rpx;
	  }
	}      
	.coupons_list_bg {
	  width: 100%;
	  background: url("https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%89%A9%E5%93%81%E8%AF%A6%E6%83%85bg.png") no-repeat center center;
	  height: 350rpx;
	  background-size: cover;
	  .coupons_num {
	    padding-top: 80rpx;
	    padding-left: 100rpx;
	    .coupons_num01 {
	      font-size: 90rpx;
	      font-weight: bold;
	      color: #fff;
	    }
	    .coupons_num02 {
	      font-size: 30rpx;
	      font-weight: bold;
	      color: #fff;
	    }
	  }
	  .coupons_num03 {
	    font-size: 30rpx;
	    color: #fff;
	    padding-left: 100rpx;
	  }
	}
	.coupons_list_bg02 {
	      background: url("https://iconimg.oss-cn-hangzhou.aliyuncs.com/%E7%86%8A%E7%8C%AB%E4%BB%A3%E7%90%86/%E5%9B%BE%E6%A0%87/%E7%89%A9%E5%93%81%E8%AF%A6%E6%83%85bg2.png") no-repeat center center;
	      background-size: cover;
	      .coupons_num {
	        .coupons_num01 {
	          color: #7a3131;
	        }
	        .coupons_num02 {
	          color: #7b3131;
	        }
	      }
	      .coupons_num03 {
	        color: #7b3131;
	      }
	}
	.coupons_list_bg03{
		background: none;
		image{
			width: 100%;
			height: 100% !important;
		}
	}
	.coupons_list_con {
	  background-color: #fff;
	  padding:30rpx 30rpx;
	  .coupons_list_tit {
	    font-size: 40rpx;
	    font-weight: bold;
	    color: #212121;
	  }
	  .coupons_list_text {
	    font-size: 28rpx;
	    color: #212121;
	    margin-top: 20rpx;
	    .coupons_list_num {
	      color: #ff6b05;
	    }
	  }
	}
	.coupons_list_detile {
		padding: 20rpx 30rpx;
	  .coupons_list_tit {
	    font-size: 30rpx;
	    color: #212121;
	  }
	  .coupons_list_text {
	    font-size: 28rpx;
	    color: #999999;
	    margin-top: 20rpx;
	  }
	  .coupons_detile {
	    margin-bottom: 30rpx;
	  }
	}      
}
</style>
